<template>
    <div class="page">
        <div class="fromWrap">
            <div class="headerWrap">
                <div class="header">
                    <a @click="$router.back()" class="pull-left"></a>
                    <h1>{{pageType}}</h1>
                    <a class="pull-right" @click="$router.push({path: '/'})"></a>
                </div>
            </div>
            <form class="userComForm">
                <div :class="{active:phone}">
                    <label>手机号</label>
                    <input type="tel" v-model="phone" placeholder="请输入手机号"/>
                </div>
                <div :class="{active:code}" class="qrCode qrCodeMM" v-show="pageType!=='登录'">
                    <label>验证码</label>
                    <input type="tel" v-model="code" placeholder="6位"/>
                    <span><b></b><a @click="sendCode" :class="{activeColor:!isSendCode}">{{timeTips}}</a></span>
                </div>
                <div class="qrCode" :class="{active:password}">
                    <label>密码</label>
                    <input :type="eye ? 'text' : 'password'" v-model="password" placeholder="6-12位"/>
                    <span :class="{active:eye}" @click="eye=!eye"><b></b></span>
                </div>
                <div :class="{active:confirmpassword}" v-show="pageType!=='登录'">
                    <label>密码</label>
                    <input v-model="confirmpassword" placeholder="确认密码"/>
                </div>
                <p class="clearfix"><a @click="changeType">{{pageType === '登录' ? '注册新账号 ?' : '账户密码登录'}}</a></p>
                <a :class="{active:isAllFill}" @click="pageType === '登录' ? login() : register()">{{pageType}}</a>
            </form>
        </div>
    </div>
</template>

<script>
    import HeaderView from './../components/header';
    import utils from './../js/utils';
    export default {
        name: "register",
        data(){
            return {
                pageType: '登录',
                timeTips: '获取验证码',
                eye: false,
                phone: '',
                code: '',
                password: '',
                confirmpassword: '',
                codeId: ''
            }
        },
        components:{
            HeaderView
        },
        computed:{
            isAllFill(){
                return this.pageType === '登录'
                    ? ( this.phone && this.password )
                    : ( this.phone && this.password && this.code && this.confirmpassword );
            },
            isSendCode:function(){
                return this.timeTips === '获取验证码' || this.timeTips === '重新获取验证码';
            }
        },
        methods:{
            /*
            * 获取登录或注册参数
            * */
            getParams(){
                let params = {
                    phone: this.phone,
                    password: this.password
                };
                if(this.pageType !== '登录'){
                    params.code = this.code;
                    params.confirmpassword = this.confirmpassword;
                    params.codeId = this.codeId;
                }
                if(utils.isWeiXin()){
                    Object.assign(params , this.$route.query);
                    params.platform = 'wx';

                }else if(utils.isFeiYu()){
                    Object.assign(params , JSON.parse(window.feiyu.deviceLogin()) )
                }else{
                    params.platform = 'h5';
                }
                return params;
            },
            /*
            * 改变页面类型
            * */
            changeType(){
                this.pageType = this.pageType === '登录' ? '注册' : '登录';
            },
            isPassed(){
                //表单验证
                return this.pageType === '登录'
                    ? ( utils.validate('phone' , this.phone)  && utils.validate('psdLen' , this.password ) )
                    : ( utils.validate('phone' , this.phone)  && utils.validate('code' , this.code ) && utils.validate('psdLen' , this.password) && utils.validate('psdLen' , this.confirmpassword) );
            },
            /*
            * 获取验证码
            * */
            sendCode(){
                utils.sendCode(this , { phone: this.phone} , 'Register/sendCode');
            },
            /*
            * 登录
            * */
            login(){
                let that = this;
                if(!that.isPassed()) return;
                utils.ajax({
                    url: utils.AJAX_SRC + "Login",
                    params: that.getParams(),
                    success: function (result) {
                        if(result.errcode < 0){
                            utils.showTips(result.errmsg);
                            return;
                        }
                        utils.setLocalStorage('token' , result.data.token);
                        let backUrl = that.$route.query.backurl;
                        if(backUrl) location.replace(backUrl);
                        else that.$router.replace({path: '/'});
                        if(utils.isFeiYu()) window.feiyu.setToken(result.data.token);
                    }
                })
            },
            /*
            * 注册
            * */
            register(){
                if(!this.isPassed()) return;
                let that = this;
                utils.ajax({
                    url: utils.AJAX_SRC + "Register",
                    params: that.getParams(),
                    success: function (result) {
                        if(result.errcode < 0){
                            utils.showTips(result.errmsg);
                            return;
                        }
                        that.pageType = '登录';
                        utils.showTips('注册成功');
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .headerWrap{position: fixed;left: 0;top: 0;width: 100%;background: #fff;z-index: 999;border-bottom: 1px solid #f1f1f1;}
    .header{width: 100%;height: 2.2rem;line-height: 2.2rem;text-align: center;background: #fff;z-index: 99;;}
    .pull-left{position: absolute;bottom:0;left:0;display: block;width: 3rem;height: 2.2rem;background: url(./../assets/icon/arrow-left.svg) no-repeat 0.5rem center / 1.6rem;}
    .header h1{font-size: 0.8rem;}
    .pull-right{position: absolute;top:0;right:0;display: block;width: 3rem;height: 2.2rem;background: url(./../assets/icon/home.svg) no-repeat 1rem center / 1.4rem;}
</style>
